<template>
  <div class="container">
    <rz-dialog
      :dialogVisible.sync="show"
      :title="title"
      @oncancel="oncancel"
      width="50%"
      @onconfirm="onconfirm"
    >
      <el-form label-width="120px" :model="form" :rules="rules" ref="formName">
        <el-row>
          <el-col :span="12">
            <el-form-item label="员工姓名">
              <el-input v-model="form.personnelName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采样日期" prop="actualdate">
              <el-date-picker
                v-model="form.actualdate"
                :picker-options="pickerOptions"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采样街道">
              <el-cascader
                :props="{ value: 'areaCode', label: 'areaName' }"
                v-model="form.areaName"
                :options="areaOptions"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社区">
              <el-input v-model="form.communityName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="采样地点" prop="samplingpoint">
              <el-input v-model="form.samplingpoint"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="填报者">
              <el-input v-model="form.informant" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="核酸采样照片" required>
          <el-upload
            list-type="picture-card"
            accept="image/*"
            :on-preview="handlePictureCardPreview"
            :action="$upload"
            :class="{ hide: hideUpload }"
            :headers="$headers()"
            :limit="1"
            :file-list="form.imageList"
            :on-error="onError"
            :on-success="handleAvatarSuccess"
            :on-remove="onRemove"
            :before-remove="beforeRemove"
            :before-upload="
              (e) => {
                return $beforeAvatarUpload(e);
              }
            "
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip">
              登录苏周到APP截图并保存核酸检测结果或核酸检测采样记录；
            </div>
            <div slot="tip">只支持.jpg和.png格式，大小不超过5M</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-dialog :visible.sync="dialogImage" v-if="dialogImage" append-to-body>
        <img width="100%" :src="form.imageList[0].url" alt="" />
      </el-dialog>
    </rz-dialog>
  </div>
</template>
<script>
import { groupArea } from "@/api/modules/enterprise";
import { resumeWorkAndSaveNucleicAcidSampling } from "@/api/modules/coldLink";

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    resumeData: {
      type: Object,
    },
  },
  // 页面加载
  created() {
    console.log(this.resumeData);

    this.form.personnelName = this.resumeData.thename;
    this.form.informant = sessionStorage.getItem("logname");
    this.form.fsysloginid = this.resumeData.fSysloginid;
    this.form.unitId = this.resumeData.sid;
    this.form.actualdate = this.$moment().format("YYYY-MM-DD HH:MM");

    // this.form.personnelName = this.resumeData.unitId;
    this.form.id = this.resumeData.id;

    this.show = this.dialogVisible;
    this.findAreaListNoParentByParentCode();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() > Date.now() ||
            time.getTime() < new Date("2022-01-01").getTime()
          );
        },
      },
      title: "核酸采样信息填报",
      form: {
        actualdate: "",
        communityName: "",
        fsysloginid: "",
        id: "",
        imageList: [],
        informant: "",
        remark: "",
        samplingpoint: "",
        samplingpointDistrictcode: "",
        samplingpointStreetcode: "",
        unitId: "",
      },
      rules: {
        actualdate: [
          { required: true, message: "请选择采样日期", trigger: "blur" },
        ],
        samplingpoint: [
          { required: true, message: "请输入采样点", trigger: "blur" },
        ],
      },
      dialogImage: false,
      areaOptions: [],
    };
  },
  // 方法
  methods: {
    oncancel() {
      this.$refs.formName.resetFields();
      //   this.$emit("update:show", false);
      this.$emit("oncancel");
    },
    onError(e) {
      this.$error("上传失败");
    },
    handleAvatarSuccess(e) {
      if (e.code == 200) {
        // this.addForm.coverImg = this.$uploadURL + e.data;
        this.form.imageList.push({
          url: this.$uploadURL + e.data,
          sampleImageName: "图片",
          sampleImageUrl: this.$uploadURL + e.data,
        });
      }
    },
    onRemove() {
      this.form.imageList = [];
    },
    beforeRemove(file) {
      return this.$confirm("确认删除图片吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
    },
    handlePictureCardPreview() {
      this.dialogImage = true;
    },
    findAreaListNoParentByParentCode() {
      groupArea({
        params: {
          areaCode: "320500",
        },
      }).then((res) => {
        this.areaOptions = res.data.children;
      });
    },
    handleChange(e) {
      this.form.samplingpointDistrictcode = e[0];
      this.form.samplingpointStreetcode = e[1];
    },
    onconfirm() {
      this.$refs.formName.validate((valid) => {
        if (!valid) return this.$error("请输入必填项");
        if (!this.form.imageList.length) return this.$error("请上传核酸报告");
        resumeWorkAndSaveNucleicAcidSampling(this.form).then((res) => {
          this.$success("复工成功");
          this.$emit("onsuccess");
        });
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {
    hideUpload() {
      return this.form.imageList.length >= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  /deep/.hide .el-upload--picture-card {
    display: none;
  }
  .el-date-editor.el-input {
    width: 100%;
  }
  /deep/ .el-dialog__body {
    padding-bottom: 0 !important;
  }
  .el-cascader {
    width: 100%;
  }
}
</style>